<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="A cross-browser javascript that enables you to style your scroll-bars with CSS" />
<title>fleXcroll example style test page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Emrah BASKAYA" />
<link href="tutorsty.css" rel="stylesheet" type="text/css" />
<link href="flexcrollstyles.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="flexcroll.js"></script>
</head>
<body>
<div id='content'>
	<h1>FleXcroll, Flexible Custom Scroll Bars Example Style</h1>
	<h2>Using horizontal stacks with previously unknown width</h2>
	<p>When you don't know how big your content will be horizontally, you need to place your content in a specific way, wrapped inside
	a div with display: inline, so that the wrapped div enlarges with respect to content. Please see the .horizontalwrap style and review
	styles for img inside the horizontal wrap, in the CSS file</p>
	
	<div id='mycustomscroll' class='flexcroll'>
		<div id='horizontalwrap'>
		  <img src="mypicture.jpg" width="100" height="100" />1<img src="mypicture.jpg" width="100" height="100" />2
		  <img src="mypicture.jpg" width="100" height="100" />3<img src="mypicture.jpg" width="100" height="100" />4
		  <img src="mypicture.jpg" width="100" height="100" />5<img src="mypicture.jpg" width="100" height="100" />6
		  <img src="mypicture.jpg" width="100" height="100" />7<img src="mypicture.jpg" width="100" height="100" />8
		  <img src="mypicture.jpg" width="100" height="100" />9<img src="mypicture.jpg" width="100" height="100" />10
		  <img src="mypicture.jpg" width="100" height="100" />11<img src="mypicture.jpg" width="100" height="100" />12
		  <img src="mypicture.jpg" width="100" height="100" />13<img src="mypicture.jpg" width="100" height="100" />14
		  <img src="mypicture.jpg" width="100" height="100" />15<img src="mypicture.jpg" width="100" height="100" />16
		  <img src="mypicture.jpg" width="100" height="100" />17<img src="mypicture.jpg" width="100" height="100" />18
		  <img src="mypicture.jpg" width="100" height="100" />19<img src="mypicture.jpg" width="100" height="100" />20
		  <img src="mypicture.jpg" width="100" height="100" />21<img src="mypicture.jpg" width="100" height="100" />22
		  <img src="mypicture.jpg" width="100" height="100" />23<img src="mypicture.jpg" width="100" height="100" />24
		</div>
	</div>

</div>



<div id='footer'>
<div class="copyrightnotice">Style by Emrah BASKAYA</div>
</div>
</body>
</html>